<template>
    <div class="modal fade bs-example-modal-sm" id="msgModal" tabindex="-1" role="dialog" aria-labelledby="msgModal">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <p class="success" v-if="msgModal.error === '' || msgModal.error === undefined">{{ msgModal.success
                    }}</p>
                <p class="error" v-else>{{ msgModal.error }}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        computed : {
            msgModal(){
                return {
                    success: this.$store.state.msgModal.success,
                    error: this.$store.state.msgModal.error,
                }
            }
        }
    }
</script>

<style scoped>
    .modal-content p {
        height: 30px;
        line-height: 30px;
        width: 500px;
        padding: 0 10px;
        text-align: center;
        margin: 0;
        color: #35947D;
        background: #DDFFF5;
        border-radius: 4px;
    }

    .modal-content p.error {
        background: #F2DEDE;
        color: #a94442;
    }
</style>
